import React from 'react';
import ThridList from '../../../Component/thirdList'
import { Input ,Select } from 'antd';
import { inject, observer } from 'mobx-react';
import bornDate from '../../../util/bornDate'

const Search = Input.Search;
const Option = Select.Option;




@inject('transManage')
@observer
export default class UserFeeDetail extends React.Component {

    componentWillMount() {
        this.props.transManage.getUserList()
    }
    handelFilterProductList(value){
        this.props.transManage.userList=this.props.transManage.userList.filter(e=>{
            return e.name.indexOf(value)!=-1
        })
    }
    showDelevelopList(id){
        this.props.transManage.DeveloperUserProductList.developerUserId=id;
        this.props.transManage.getDeveloperUserProductList()
    }
    handleChange(val){
        this.props.transManage.DeveloperUserProductList.month=val;
        this.props.transManage.getDeveloperUserProductList()
    }
    render(){
        const {userList,userListAll,productsubList}=this.props.transManage
        return (
            <div style={{'height':'100%'}} className="pos-rel">

                <div  style={{'height':'100%'}} className="br-r-d8 fl pos-abs">
                    <div className="p1014 mxw-240">
                        <Search
                            placeholder="筛选"
                            style={{ width: '100%' }}
                            enterButton
                            onSearch={this.handelFilterProductList.bind(this)}
                            onInput={(e)=>{e.target.value.trim()==''?this.props.transManage.userList=userListAll:null}}
                        />
                    </div>
                    <ul className="third-list dib" style={{'width':'240px'}}>
                        {userList.map((res,i)=>(
                            <ThridList radius={true} click={this.showDelevelopList.bind(this,res.developerid)} infObj={res} key={res.code||i} pathl={require('../../../public/images/head.jpg')} pathr={require("../../../public/images/lock.png")}/>
                        ))}
                    </ul>
                </div>
                <div className="p20 fl w100 " style={{'paddingLeft':'260px'}}>
                        <h2 className="dib f18 fwb">客户维护</h2>
                    <div className="fr">
                        <Select  style={{ width: 120}} defaultValue={new Date().getFullYear()+'-'+(new Date().getMonth()+1)} onChange={this.handleChange.bind(this)}>
                            {bornDate().map(
                                (e)=>{
                                    return (
                                        <Option value={e} key={e}>{e}</Option>
                                    )
                            })}

                        </Select>
                    </div>
                    <ul className="productList mt-20 tal">
                        {productsubList.map((e)=>(
                            <li className="product-item" key={e.id}>
                                <img src={require('../../../public/images/produts.png')} alt="pic" className="v-m"/>
                                <div className="dib v-m">
                                    <p className="normalp">{e.name||'暂无数据'}</p>
                                    <p className="smallp">使用次数/成功使用次数/使用价格</p>
                                    <p className="bolderp">{e.useCount||'暂无数据'}/{e.successUseCount||'暂无数据'}/{e.useCharge||'暂无数据'}</p>
                                </div>
                            </li>
                        ))}
                    </ul>
                </div>

            </div>
        )
    }
}